<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>当当网</title>
</head>
<style>
    /* 类选择器 消除li标记，字体居中，颜色，左浮动，字体，大小背景色*/
    .ll2{
        float: left;
        list-style-type: none;
        background: #ff9900;
        text-align:center;
        font-size: 1.1em;
        font-family: "宋体";
        color: white;
    }
    /* 类选择器 消除li标记，字体居中，颜色，左浮动，字体，大小背景色*/
    .ll{
        float: left;
        list-style-type: none;
        background: #ccffff;
        /* width: 20px; */
        text-align:center;
        font-size: 1.1em;
        font-family: "宋体";
    }
    /* 类选择器 消除li标记，字体居中，颜色，左浮动，字体，大小背景色*/
    .l2{
        float: left;
        list-style-type: none;
        text-align:center;
        font-size: 1.1em;
        font-family: "宋体";
    }
    /* 最外层标签设置与作用边界的距离 */
    #outer{
        padding-left: 20px;
        padding-right: 20px;
    }
    /* 首部标签，设置宽和高 */
    #top{
        height: 10%;
        width: 100%;
    }
     /* 浮动对齐，右，消除块状特性 ，设置内边距*/
    #topright{
        float: right;
        padding-top: 5px;
        width: 30%;
    }
    /* 浮动对齐，左，消除块状特性 */
    #topleft{
        float: left;
        width: 70%;
    }
    #mtop{
        height: 5%;
        width: 100%;
        float: left;
    }
    
    #atop{
        height: 15%;
        width: 100%;
        /* float: left; */
        margin-top: 10px;
    }
</style>
<body>
    <!-- 最外层div标签 -->
    <div id="outer">
        <!-- 首部标签 -->
        <header id="top">
            <!-- 首部里的左div，放logo，设置宽度 -->
            <div id="topleft">
                 <img id="logo" src="./imgs/logo.jpg" style="width: 130px">
            </div>
            <!-- 首部里的右div，放图片，和文字 -->
            <div id="topright">
                <!-- 列表 -->
                <ul>
                    <li class="l2"><img src="./imgs/icon_count.png"/></li><br>
                    <li class="ll">尾品汇 &nbsp;</li>
                    <li class="ll">当当优品 &nbsp; </li>
                    <li class="ll">数字馆 &nbsp; </li>
                    <li class="ll">都看阅器 </li>
                </ul>
            </div>
        </header>
        <div id="mtop">
            <!-- 表格标签 -->
            <table>
                <tr>
                    <td class="ll2">&nbsp;首页&nbsp;&nbsp;</td>
                    <td class="ll2">&nbsp;图书&nbsp;&nbsp;</td>
                    <td class="ll2">&nbsp;音像&nbsp;&nbsp;</td>
                    <td class="ll2">&nbsp;童装&nbsp;&nbsp;</td>
                    <td class="ll2">&nbsp;服装&nbsp;</td>
                    <td class="ll2">&nbsp;鞋靴&nbsp;</td>
                    <td class="ll2">&nbsp;运动&nbsp;&nbsp;</td>
                    <td class="ll2">&nbsp;箱包&nbsp;</td>
                    <td class="ll2">&nbsp;美妆&nbsp;</td>
                    <td class="ll2">&nbsp;珠宝&nbsp;&nbsp;</td>
                    <td class="ll2">&nbsp;家居&nbsp;</td>
                    <td class="ll2">&nbsp;食品&nbsp;&nbsp;</td>
                    <td class="ll2">&nbsp;酒&nbsp;&nbsp;</td>
                    <td class="ll2">&nbsp;手机&nbsp;</td>
                    <td class="ll2">&nbsp;数码&nbsp;&nbsp;</td>
                    <td class="ll2">&nbsp;电脑&nbsp;&nbsp;</td>
                    <td class="ll2">&nbsp;家电&nbsp;</td>
                </tr>
            </table>
        </div>
        <!-- 中间div -->
        <div id="atop">
            <img src="./imgs/banner.png" width="95%" height="10%">
        </div>
        <!-- 下半部分大的div -->
        <div style="border:2px #66ff33 solid; width: 95%">
            <!-- 里面最上层div -->
            <div style="margin-top:10px;width: 95%;">
                <img src="./imgs/bg_bang.gif">
            </div>
            <div>
                <!-- 把div编程行内标签，使用绝对定位往上移 -->
                <div style="display:inline-block; width: 22%;position: relative;top:-30px;">
                    <ul>
                        <!-- 把img，使用绝对定位移动 -->
                        <li style="list-style-type: none"><img src="./imgs/bookNo1.gif" style="position: relative; top:30px;left: 20px;"/></li>
                        <li style="list-style-type: none"><img src="./imgs/book-01.jpg" /></li>
                    </ul>
                </div>
                <!-- 把div编程行内 用p标签分段写文字-->
                <div style="display:inline-block;">
                    <!-- 设置颜色 -->
                      <p style="color:deepskyblue">偷影子的人</p>
                      <p>作者: [法] 马克.李维(Marc Levy) 著</p>
                      <p>出版社:湖南文艺出版社</p>
                      <!-- 设置颜色 -->
                      <p>当当价:<a style="color:darkred">&yen;17.90</a></p>
                      <p>不知道姓氏的克蕾儿。这就是你在我生命你的角色，</p>
                      <p>我童年时的小女孩，今日锐变成了女人，一段青梅竹</p>
                      <p>马的回忆，一个时间之神没有应允的愿望。一个老</p>
                      <p>是受班上同学欺负的瘦小男孩，因为拥有一种特殊</p>
                      <p>能力而强大:他能“偷别人的影子”</p>
                </div>
                <!-- 行内模式 -->
                <div style="display:inline-block;">
                    <!-- 使用绝对定位往上移 -->
                    <ul style="position: relative;top:-30px;">
                         <!-- 把img，使用绝对定位移动 -->
                        <li style="list-style-type: none"><img src="./imgs/bookNo2.gif" style="position: relative; top:30px;left: 20px;"/></li>
                        <li style="list-style-type: none"><img src="./imgs/book-02.jpg" /></li>
                    </ul>
                    <ul>
                         <!-- 把img，使用绝对定位移动 -->
                        <li style="list-style-type: none"><img src="./imgs/bookNo3.gif" style="position: relative; top:30px;left: 20px;"/></li>
                        <li style="list-style-type: none"><img src="./imgs/book-03.jpg" /></li>
                    </ul>
                </div>
                 <!-- 行内模式, 用p标签分段写文字 -->
                <div style="display:inline-block;">
                    <!-- 设置颜色 -->
                   <p style="color:dodgerblue">看见(中央知名记者，主持人柴静:十年个人)</p>
                   <p style="color:dodgerblue">成长的告白，中国社会变迁的备忘</p>
                   <p>作者:柴静 著</p>
                   <p>出版社: 广西师范大学出版社</p>
                    <!-- 设置颜色 -->
                   <p><a style="color:darkred">&yen;17.90</a> <a style="color:aqua">7.4折</a></p>
                   <p>改变孩子先改变自己</p>
                   <p>作者:贾容稻 贾毅 著</p>
                   <p>出版社: 作家出版社</p>
                   <p><a style="color:darkred">&yen;22.20</a> <a style="color:aqua">7.4折</a></p>
                </div>
            </div>
        </div>
        <!-- 最后页尾部分，设置大小，宽度，居中，用span标签分割，插入img标签 -->
        <div style="font-size: 0.7em;width: 95%;text-align:center;color: darkgray;">
            <span >Copyright(C) 当当网 2004-2017，ALL Rights Reserved 京
            </span>
            <!-- 调整图片大小与位置 -->
            <span><img src="imgs/validate.gif" style="height:35px;width:30px;position: relative;top:10px;"></span>
            <span>证041189号出版物经营许可证 新出发京批字第直0673号</span>
        </div>
    </div>
</body>
</html>